<template>
  <!-- banner area start from here -->
    <section class="cart-wrap">
            <swiper :modules="modules" :autoplay="autoplay" :pagination="{ clickable: true }" :space-between="0" @swiper="onSwiper" @slideChange="onSlideChange" :slidesPerView="2" :centeredSlides="true" :loop="true" :initialSlide="index">
                <template v-for="(dt,i) in lists" :key="dt.id">
                    <swiper-slide :id="'yyyyyyyy-'+i">
                        <div class="swiper-itemBox">
                            <photo-frame>
                                <img :src="dt.imageUrl" @click="goDetail(dt)"/>
                            </photo-frame>
                        </div>
                    </swiper-slide>
                </template>
            </swiper>
    </section>
</template>

<script>
    import { onMounted,reactive,toRefs } from 'vue';
    import {useStore} from 'vuex'
    import {useRouter} from 'vue-router'
    import { Navigation, Scrollbar, A11y,Autoplay } from 'swiper';
    import { Swiper, SwiperSlide } from 'swiper/vue';
    import 'swiper/css';
    //import 'swiper/css/pagination';
    import photoFrame from '@/components/photoFrame.vue'
    export default{
        //props:['lists'],
        components:{
            Swiper, 
            SwiperSlide,
            photoFrame
        },
        setup(){
            const store = useStore()
            const router = useRouter()

            const state = reactive({
                modules : [Navigation, Scrollbar, A11y,Autoplay],
                lists:[],
                index:1,
                swiperOption:{
                    slidesPerView: 3,
                    spaceBetween: 30,
                    centeredSlides: true,
                    loop: true,
                },
                autoplay:{
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
                }
            })
            onMounted(async () =>{

                const res = await store.dispatch("arApi/get_collection_list", {
                    page: 1,
                    limit: 50,
                    orderField: 1,
                    orderType: "desc"
                });
                if(res.success){
                    state.lists = res.data
                }
                   
            })
            const onSwiper = (swiper) => {
                
            };
            const onSlideChange = (sw) => {
                //console.log("realIndex:",sw)
            };

            const goDetail = (item)=>{
                router.push(`/detail/${item.goodsId}`)
            }

            return{
                ...toRefs(state),
                onSwiper,
                onSlideChange,
                goDetail
            }
        }
    }
    
</script>

<style lang="scss">
.cart-wrap{
    width: 100%;
    padding: 0;
    overflow: hidden;
    margin: 0 auto;
    transform: translateY(50%);
    -webkit-transform: translateY(50%);
    margin: -150px 0 0 0;
    .swiper{
        width: 1200px;
        margin: 0 0 0 -225px;
    }
    .swiper-itemBox{
        width: 100%;
        overflow: hidden;
        background-size: cover;
        background-repeat: no-repeat;
        background: #022424;
        img{
            width: 100%;
            display: block;
            height: 700px;
        }
    }
    .swiper-slide {
      position: relative;
      z-index: 10;
      text-align: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  transition: 300ms;
      &.swiper-slide-prev{
        z-index: -1;
        transform: scale(0.8) rotateY(-70deg) perspective(1200px) rotateY(40deg) translateX(30px);
        -webkit-transform:scale(0.8) rotateY(-70deg) perspective(1200px) rotateY(40deg) translateX(30px);
        transform-origin: right center;
      }
      &.swiper-slide-active{
          z-index: 12;
      }
      &.swiper-slide-next{
        transform: scale(0.8) perspective(1200px) rotateY(-40deg) translateX(-30px);
        -webkit-transform:scale(0.8) perspective(1200px) rotateY(-40deg) translateX(-30px);
        transform-origin: left center;
        }
    }
    .swiper-slide-active,.swiper-slide-duplicate-active{
      transform: scale(1);
	}
}

</style>